import React from "react";
import './style.scss';
import { ITodoItem } from "../../interfaces";
import { connect } from "react-redux";

// export default function TodoItem(props: Props) {
//   return (
//     <div className="todo-item">
//       <div>{props.title}</div>
//     </div>
//   )
// }


interface IState {
  
}

interface IProps extends ITodoItem {
  isMobile: boolean;
  updateTodo: (todoItem: ITodoItem) => void;
  deleteTodo: (id: number) => void;
  data: ITodoItem
}

// 继承的组件后面需要加上泛型<Props>
class TodoItem extends React.Component<IProps> {
  state: IState;
  constructor(props: IProps) {
    super(props);
    this.state = {
      
    }
  }

  handleDoneChange = (e: any) => {
    const {data} = this.props;
    let todoItem: ITodoItem = {
      id: data.id,
      title: data.title,
      content: data.content,
      isDone: e.target.checked,
    }
    this.props.updateTodo(todoItem);
  }

  handleDelete = (e: any) => {
    const {data} = this.props;
    this.props.deleteTodo(data.id as number);
  }

  render() {
    const {data, isMobile} = this.props;
    
    return (
      <div className="todo-item">
        {
          isMobile ? (
            <div className="mobile-mode">
              <input className="checkbox" type="checkbox" onChange={this.handleDoneChange} checked={data.isDone}/>
              <div className={`content-box `}>
                <div className="id-box">{data.id}</div>
                <div className="content-wrapper">
                  <div className={`item title ${data.isDone ? 'deleted' : ''}`}>{data.title}</div>
                  <div className="item content">{data.content}</div>
                </div>
              </div>
              <div className="btn" onClick={this.handleDelete}>
                删除
              </div>
            </div>
          ) : (
            <div className="pc-mode">
              <input className="checkbox" type="checkbox" onChange={this.handleDoneChange} checked={data.isDone}/>
              <div className={`content-box ${data.isDone ? 'deleted' : ''}`}>
                <div className="id-box">{data.id}</div>
                <div className="item title">{data.title}</div>
                <div className="item content">{data.content}</div>
              </div>

              <div className="btn" onClick={this.handleDelete}>
                删除
              </div>
            </div>
          )
        }
      </div>
    )
  }
}
const mapStateToProps = (state: any) => {
  return {
    isMobile: state.isMobile
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    updateTodo(todoItem: ITodoItem) {
      dispatch({
        type: 'updateTodo',
        value: todoItem
      })
    },
    deleteTodo(id: number) {
      dispatch({
        type: 'deleteTodo',
        value: id
      })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoItem);